<template>
    <div class="box">
        <div class="nav">
            <Navigation/>
        </div>
        <!-- 轮播图 -->
      <div class="carousel">
        <el-carousel :interval="5000" arrow="always" height="660px">
            <el-carousel-item v-for="item in 2" :key="item">
                <img src="./image/banner.png" alt="">
            </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 技术细分方向 -->
      <div class="technology">
        <div class="title">技术细分方向<div></div></div>
        <div class="item-list">
            <div class="item" v-for="(item,index) in technology" :key="index"> 
                <img :src="item.img" alt="">
                <div class="text1">{{item.text1}}<div></div></div>
                <div class="text2">{{item.text2}}</div>
            </div>
        </div>
      </div>
      <!-- 开发服务方案 -->
      <div class="plan">
        <div class="title">技术细分方向<div></div></div>
        <div class="item-list">
            <div class="item i1">
                <div class="top-half">
                    <img :src="plan[0].img" alt="">
                    <div class="text1">{{plan[0].text1}}</div>
                    <div class="text2">{{plan[0].text2}}</div>
                </div>
                <div  class="bottom-half">
                    <div class="pitem" v-for="(item,index) in plan[0].p" :key="index">
                        <img :src="plan[0].imgDui" alt=""> 
                        <p>{{item}}</p>
                    </div>
                    <button>了解详情</button>
                </div>
            </div>
            <div class="item i2">
                <div class="top-half">
                    <img :src="plan[1].img" alt="">
                    <div class="text1">{{plan[1].text1}}</div>
                    <div class="text2">{{plan[1].text2}}</div>
                </div>
                <div  class="bottom-half">
                    <div class="pitem" v-for="(item,index) in plan[1].p" :key="index">
                        <img :src="plan[1].imgDui" alt=""> 
                        <p>{{item}}</p>
                    </div>
                    <button>了解详情</button>
                </div>
            </div>
        </div>
      </div>
      <!-- 服务流程  -->
      <div class="process">
        <div class="title">服务流程<div></div></div>
        <div class="item-list">
            <div class="item" v-for="(item,index) in process" :key="index">
                <img :src="item.img" alt="">
                <div class="text1">{{item.text1}}</div>
                <div class="text2">
                    <p v-for="(item2,index2) in item.text2" :key="index2">{{item2}}</p>
                </div>
            </div>
            <div class="dian dian1"></div>
            <div class="dian dian2"></div>
            <div class="dian dian3"></div>
            <div class="dian dian4"></div>
            <div class="dian dian5"></div>
            <div class="dian dian6"></div>
            <div class="xian xian1"></div>
            <div class="xian xian2"></div>
            <div class="xian xian3"></div>
            <div class="xian xian4"></div>
            <div class="xian xian5"></div>
            <div class="xian xian6"></div>
        </div>
        <div class="hengxian"></div>
    </div>
      <!-- 为什么选择我们 -->
      <div  class="why">
        <div class="title">为什么选择我们<div></div></div>
        <div class="item-list">
            <div class="item" v-for="(item,index) in why" :key="index">
                <img :src="item.img" alt="">
                <div class="text1">{{item.text1}}</div>
                <div class="text2">{{item.text2}}</div>
            </div>
        </div>
    </div>
      <!-- 合作伙伴 -->
      <div class="partner">
        <div class="title">合作伙伴<div></div></div>
        <div  class="item-list">
            <div class="item" v-for="(item,index) in partner"  :key="index">
                <img :src="item" alt="">
            </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <Bottom />
      </div>
    </div>
  </template>
  
  <script>
  import Navigation from '../navigation/index.vue'
  import Bottom from '../bottom/index.vue'
  export default {
    name: 'HelloWorld',
    data(){
        return {
            technology:[
                {
                    img: require('./image/Vue.png'),
                    text1:'Vue项目组',
                    text2:'入门水平也能做到超神'
                },
                {
                    img:require('./image/Reatch.png'),
                    text1:'Reatch项目组',
                    text2:'入门水平也能做到超神'
                },
                {
                    img:require('./image/Flutter.png'),
                    text1:'Flutter项目组',
                    text2:'入门水平也能做到超神'
                },
                {
                    img:require('./image/小程序.png'),
                    text1:'小程序项目组',
                    text2:'入门水平也能做到超神'
                },
                {
                    img:require('./image/H5.png'),
                    text1:'H5项目组',
                    text2:'入门水平也能做到超神'
                },
                {
                    img:require('./image/Ui.png'),
                    text1:'Ui项目组',
                    text2:'入门水平也能做到超神'
                },
                {
                    img:require('./image/Nodejs.png'),
                    text1:'Nodejs项目组',
                    text2:'入门水平也能做到超神'
                },
                {
                    img:require('./image/Java.png'),
                    text1:'Java项目组',
                    text2:'入门水平也能做到超神'
                }
            ],
            plan:[
                {
                    img:require('./image/组驻场服务.png'),
                    imgDui:require('./image/对号 (1)(1).png'),
                    text1: '驻场服务',
                    text2: 'On site service',
                    p:[
                        '按月聘用程序员，最快一天到岗，节省55%的人力成本。',
                        '1-5年+经验多层次',  
                        '可选全职兼职，支持定制每周工时',  
                        '每天提交日报'
                    ]
                },
                {
                    img:require('./image/远程服务.png'),
                    imgDui:require('./image/对号 (1)(2).png'),
                    text1: '远程服务',
                    text2: 'Remote service',
                    p:[
                        '按月聘用程序员，最快一天到岗，节省55%的人力成本。',
                        '1-5年+经验多层次',  
                        '可选全职兼职，支持定制每周工时',  
                        '每天提交日报'
                    ]
                },
            ],
            process:[
                {
                    img:require('./image/需求澄清.png'),
                    text1:'需求澄清',
                    text2:[
                        '需求沟通',
                        '分析需求',  
                        '确认需求'
                    ]
                },
                {
                    img:require('./image/制定计划.png'),
                    text1:'制定计划',
                    text2:[
                        '交付流程规划','交付团队规划','资源渠道准备'
                    ]
                },
                {
                    img:require('./image/人才匹配.png'),
                    text1:'人才匹配',
                    text2:[
                        '项目人员协调','资源池搜索','对接推荐人才'
                    ]
                },
                {
                    img:require('./image/交付入职.png'),
                    text1:'交付入职',
                    text2:[
                        '安排到岗','合同签订','办理手续','入职跟踪'
                    ]
                },
                {
                    img:require('./image/项目实施.png'),
                    text1:'项目实施',
                    text2:[
                        '技术经理带队驻场','项目进度按日更新','管理‘0’成本'
                    ]
                },
                {
                    img:require('./image/后期维护.png'),
                    text1:'后期维护',
                    text2:[
                        '后期bug修改随时调整','完整代码提供','满意度调查'
                    ]
                }
            ],
            why:[
                {
                    img:require('./image/1.png'),
                    text1:'专业经理驻场',
                    text2:'技术经理带队驻场，项目进度按日 更新，管理“0”成本'
                },
                {
                    img:require('./image/2.png'),
                    text1:'极速响应',
                    text2:'深度分析客户需求，快速组建专属交 付小组，1天到岗，及时有效满足客 户需求。'
                },
                {
                    img:require('./image/3.png'),
                    text1:'优质服务',
                    text2:'技术经理1V1服务，项目需求拆分 按周统计，技术难点解析，工作节 点按日更新， 确保员工高效工作。'
                },
                {
                    img:require('./image/4.png'),
                    text1:'案例客户',
                    text2:'服务400+家品牌企业，100+家  500强企业，获得众多长期战略 合作伙伴好评。'
                }
            ],
            partner:[
                require('./image/11 (1).png'),
                require('./image/11 (2).png'),
                require('./image/11 (3).png'),
                require('./image/11 (4).png'),
                require('./image/11 (5).png'),
                require('./image/11 (6).png'),
                require('./image/11 (7).png'),
                require('./image/11 (8).png'),
                require('./image/11 (9).png'),
                require('./image/11 (10).png')
            ]
        }
    },
    components: {
        Navigation,
        Bottom
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
  .box{
    width: 1920px;
    margin: auto;
    position: relative;
    .nav{
        position: absolute;
        z-index: 999;
    }
    .carousel{
        height: 660px;
        width: 100%;
    }
    .technology{
        margin-top: 60px;
        width: 100%;
        .title{
            height: 38px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #434343;
            text-align: center;
            position: relative;
            div{
                position: absolute;
                width: 40px;
                border-bottom: 2px #279DFE solid;
                bottom: 0;
                left: 50%;
                margin-left: -20px;

            }
        }
        .item-list{
            width: 1200px;
            margin: auto;
            margin-top: 48px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .item{
                width: 284px;
                height: 188px;
                margin-bottom: 20px;
                border-radius: 3px;
                border: 1px #EAEAEA solid;
                box-shadow: 0px 0px 5px #e3e3e3;
                display: flex;
                flex-direction: column;
                align-items: center;
                img{
                    width: 93px;
                    height: 93px;
                    margin-top: 16px;
                }
                .text1{
                    padding-bottom: 7px;
                    color: #666666;
                    font-size: 16px;
                    font-weight: bold;
                    font-family: MicrosoftYaHei-Bold;
                    position: relative;
                    div{
                        position: absolute;
                        width: 30px;
                        border-bottom: 1px #279DFE solid;
                        bottom: 0;
                        left: 50%;
                        margin-left: -20px;

                    }
                }
                .text2{
                    margin-top: 7px;
                    color: #666666;
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                }
            }
        }
    }
    .plan{
        margin-top: 60px;
        width: 100%;
        .title{
            height: 38px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #434343;
            text-align: center;
            position: relative;
            div{
                position: absolute;
                width: 40px;
                border-bottom: 2px #279DFE solid;
                bottom: 0;
                left: 50%;
                margin-left: -20px;

            }
        }
        .item-list{
            display: flex;
            justify-content: center;
            margin-top: 48px;
            .item{
                width: 474px;
                height: 600px;
                background-color: pink;
                margin-right: 59px;
                border-radius: 6px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .top-half{
                    width: 353px;
                    border-bottom: 1px #0277E1 dashed ;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding-bottom: 33px;
                    img{
                        width: 74px;
                        height: 74px;
                        margin-top: 24px;
                    }
                    .text1{
                        margin-top: 15px;
                        font-size: 20px;
                        font-weight: bold;
                        font-family: MicrosoftYaHei-Bold;
                        color: #434343;
                    }
                    .text2{
                        margin-top: 8px;
                        font-size: 18px;
                        font-family: MicrosoftYaHei;
                        color: #999999;
                    }
                }
                .bottom-half{
                    width: 353px;
                    .pitem{
                        margin-top: 30px;
                        font-size: 18px;
                        font-family: MicrosoftYaHei;
                        color: #434343;
                        display: flex;
                        img{
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            margin-right: 25px;
                        }
                    }
                    button{
                        width: 186px;
                        height: 44px;
                        border-radius: 22px;
                        outline: none;    //消除默认点击蓝色边框效果
                        font-size: 14px;
                        color: #fff;
                        border: none;
                        margin-left: 83px;
                        margin-top: 53px;
                    }
                }
                
            }
            .i1{
                background-color: #F0F8FF;
                border: 1px #0378E3  solid;
                button{
                    background-color: #0277E1;
                }
            }
            .i2{
                background-color: #FFFBF4;
                border: 1px #E1A83F  solid;
                button{
                    background-color: #E1A83F;
                }
            }
        }
    }
    .process{
        background-image: url('./image/背景.png');
        margin-top: 60px;
        padding: 67px 0 67px 0;
        width: 100%;
        position: relative;
        border-top: 3px #b4b3b2 dotted;
        border-bottom: 3px #b4b3b2 dotted;
        .title{
            height: 38px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #434343;
            text-align: center;
            position: relative;
            div{
                position: absolute;
                width: 40px;
                border-bottom: 2px #279DFE solid;
                bottom: 0;
                left: 50%;
                margin-left: -20px;

            }
        }
        .item-list{
            width: 1098px;
            margin: auto;
            margin-top: 70px;
            height: 200px;
            display: flex;
            justify-content: space-between;
            position: relative;
            .item{
                display: flex;
                flex-direction: column;
                align-items: center;
                img{
                    width: 78px;
                    height: 78px;
                }
                .text1{
                    margin-top: 55px;
                    font-size: 16px;
                    color: #444;
                }
                .text2{
                    margin-top: 27px;
                    font-size: 14px;
                    color: #666;
                }
            }
            .dian{
                width: 8px;
                height: 8px;
                background: #D2D2D2;
                border-radius: 50%;
                position: absolute;
                top: 121px;
            }
            .dian1{
                left: 33px;
            }
            .dian2{
                left: 220px;
            }
            .dian3{
                left: 409px;
            }
            .dian4{
                left: 594px;
            }
            .dian5{
                left: 796px;
            }
            .dian6{
                left: 1026px;
            }
            .xian1{
                top: 78px;
                left: 37px;
            }
            .xian2{
                top: 78px;
                left: 224px;
            }
            .xian3{
                top: 78px;
                left: 413px;
            }
            .xian4{
                top: 78px;
                left: 598px;
            }
            .xian5{
                top: 78px;
                left: 800px;
            }
            .xian6{
                top: 78px;
                left: 1030px;
            }
            .xian{
                width: 1px;
                height: 44px;
                background: #D2D2D2;
                position: absolute;
            }
        }
        .hengxian{
                width: 1920px;
                height: 1px;
                background: #D2D2D2;
                position: absolute;
                top: 299px;
                left: 0px;
            }
    }
    .why{
        margin-top: 60px;
        width: 100%;
        .title{
            height: 38px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #434343;
            text-align: center;
            position: relative;
            div{
                position: absolute;
                width: 40px;
                border-bottom: 2px #279DFE solid;
                bottom: 0;
                left: 50%;
                margin-left: -20px;
            }
        }
        .item-list{
            margin-top: 50px;
            display: flex;
            justify-content: center;
            .item{
                width: 284px;
                height: 294px;
                margin: 0 11px;
                display: flex;
                flex-direction: column;
                align-items: center;
                border: 1px #F5F5F5 solid;
                box-shadow: 0px 0px 5px #e3e3e3;
                img{
                    width: 284px;
                    height: 154px;
                }
                .text1{
                    margin: 21px 33px 0  33px;
                    font-size: 16px;
                    font-family: MicrosoftYaHei-Bold;
                    font-weight: bold;
                    color: #333;
                }
                .text2{
                    margin:  19px 33px 0 33px;
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    color: #333
                }
            }
        }
    }
    .partner{
        margin-top: 60px;
        width: 100%;
        .title{
            height: 38px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #434343;
            text-align: center;
            position: relative;
            div{
                position: absolute;
                width: 40px;
                border-bottom: 2px #279DFE solid;
                bottom: 0;
                left: 50%;
                margin-left: -20px;
            }
        }
        .item-list{
            margin: auto;
            margin-top: 54px;
            width: 1204px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }
  }
  </style>
  